/**
 * Created by cherryzou on 2018/3/15.
 */
'use strict';
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    TouchableHighlight,
    Animated,
    Easing,
    FlatList,
    Dimensions,
} from 'react-native';

const {width, height} = Dimensions.get('window');
const navigatorH = 64;
const [aWidth, aHeight] = [300, 214];
const [left, top] = [0, 0];
const [middleLeft, middleTop] = [(width - aWidth) / 2, (height - aHeight) / 2 - navigatorH];


export default class Alert extends Component {

    constructor(props) {
        super(props);
        this.state = {
            offset: new Animated.Value(0),
            opacity: new Animated.Value(0),
            dataArr:this.props.dataArr,
            title: '',
            hide: this.props.isHide,
        };
    }


    render() {
        if (this.state.hide) {
            return (<View />)
        } else{
            return (

                <View style={styles.container}>
                    <Animated.View style={ styles.mask }></Animated.View>

                    <View style={styles.tip}>
                        <View style={styles.tipTitleView}>
                            <Text style={styles.tipTitleText}>{this.state.title}</Text>
                        </View>

                        <FlatList
                            ref='FlatList'
                            data={this.state.dataArr}
                            renderItem={({item}) => this.renderRows(item)}
                            keyExtractor={this.keyExtractor}
                        />

                        <View style={styles.gap}/>

                        <TouchableHighlight style={styles.button} underlayColor='#f0f0f0' onPress={() => {
                            this.iknow();
                        }}>
                            <Text style={styles.buttonText}>取消</Text>
                        </TouchableHighlight>
                    </View>
                </View>
            );
    }

    }
    componentWillMount() {

    }

    componentDidMount() {

    }

    renderRows(item){
        return (
            <TouchableHighlight style={styles.tipContentView} 
                    underlayColor='#f0f0f0' 
                    onPress={
                        this.props.onSelectedItem.bind(this,item)
                    }>
                <Text style={styles.tipText}>{item.name}</Text>
            </TouchableHighlight>
        )
    }
    keyExtractor(item:Object,index:number) {
        return item.id
    }
  
    in() {
        Animated.parallel([
            Animated.timing(
                this.state.opacity,
                {
                    easing: Easing.linear,
                    duration: 500,
                    toValue: 0.8,
                }
            ),
            Animated.timing(
                this.state.offset,
                {
                    easing: Easing.linear,
                    duration: 500,
                    toValue: 1,
                }
            )
        ]).start();
    }


    out(){
        Animated.parallel([
            Animated.timing(
                this.state.opacity,
                {
                    easing: Easing.linear,
                    duration: 500,
                    toValue: 0,
                }
            ),
            Animated.timing(
                this.state.offset,
                {
                    easing: Easing.linear,
                    duration: 500,
                    toValue: 0,
                }
            )
        ]).start();

        setTimeout(
            () => this.setState({hide: true}),
            500
        );
    }

    //取消
    iknow(event) {
        if(!this.state.hide){
            this.out();
        }
    }


    show(titles) {

        if(this.state.hide){

            this.setState({title:titles,hide: false},this.in);
        }

    }

}

const styles = StyleSheet.create({
    container: {
        flex:1,
        position:"absolute",
        width:width,
        height:height,
        left:left,
        top:top,
    },
    mask: {
        justifyContent:"center",
        backgroundColor:"#383838",
        opacity:0.8,
        position:"absolute",
        width:width,
        height:height,
        left:left,
        top:top,

    },
    tip: {
        width:aWidth,
        height:aHeight,
        left:middleLeft,
        top:middleTop,
        backgroundColor:"#fff",
        alignItems:"center",
        justifyContent:"space-between",
    },
    tipTitleView: {
        height:55,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
    },
    tipTitleText:{
        color:"#999999",
        fontSize:14,
    },
    tipContentView: {
        width:aWidth,
        borderTopWidth:0.5,
        borderColor:"#f0f0f0",
        height:45,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
    },
    tipText:{
        color:"#e6454a",
        fontSize:17,
        textAlign:"center",
    },
    button: {
        height: 45,
        backgroundColor: '#fff',

        alignSelf: 'stretch',
        justifyContent: 'center',

    },
    buttonText: {
        fontSize:17,
        color:"#e6454a",
        textAlign:"center",
    },
    gap:{
        height:5,
        width:aWidth,
        backgroundColor:'#383838',
        opacity:0.8,
    },
});
